<template>
    <div>
    <el-card>
        <!-- 搜索区域 -->
        <el-row :gutter="15">
            <el-col :span="10">  
            <el-input placeholder="请输入要查找的用户名" v-model="queryInfo.username" clearable @clear ="getUserList" @keyup.enter.native="getUserList">
                <el-button slot="append" type="primary" icon="el-icon-search" @click="getUserList">搜索</el-button>
            </el-input>
            </el-col>
            <el-col :span="3"> 
            <el-button @click="addAdmin">添加员工</el-button>
            </el-col>
        </el-row>
        <!-- table表格 -->
       <el-table :data="userList" border stripe style="margin-top:10px;"
       :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column type="index" :index="indexMethod"></el-table-column><!--  索引页  -->
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="昵称" prop="nickName"></el-table-column><!--  索引页  -->
            <el-table-column label="手机号码" prop="phone"></el-table-column><!--  索引页  -->
            <el-table-column label="邮箱" prop="email"></el-table-column><!--  索引页  -->
            <el-table-column label="角色" prop="type"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column><!--  索引页  -->
            <el-table-column label="修改时间" prop="updateTime"></el-table-column><!--  索引页  -->
            <el-table-column label="备注" prop="remark"></el-table-column><!--  索引页  -->
            <el-table-column label="操作" width="120px" >
            <template slot-scope="scope" >
                <!-- 修改 -->
                <el-button type="primary" icon="el-icon-edit"  size="mini" @click="showEditDialog(scope.row)"></el-button>
                <!-- 删除 -->
                <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteUser(scope.row.id)"></el-button>
            </template>
            </el-table-column>
        </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </el-card>
     <!-- 新增用户对话框 -->
        <el-dialog class="adduserdialog" title="添加管理员用户" :visible.sync="addDialogVisible" width="600px" @close="addDialogClosed">
        
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="auto" label-position="left" :inline= false>
                <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="昵称" prop="nickName" :required= true>
                        <el-input v-model="addForm.nickName" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="phone" :required= true>
                        <el-input v-model="addForm.phone" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="addForm.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户名" prop="username" >
                        <el-input v-model.trim="addForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model.trim="addForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色" :required= true>
                        <el-select v-model="addForm.roleId" placeholder="请选择角色">
                            <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addForm.remark"></el-input>
                </el-form-item>
            </el-form>
        
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeAddUser()">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
        <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="400px" @close="editDialogClosed">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="auto" label-position="center">
            <el-form-item label="姓名" prop="nickName" >
                <el-input v-model="editForm.nickName" ></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model.trim="editForm.username"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
                <el-select v-model="editForm.type" placeholder="请选择角色">
                    <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.roleName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model.trim="editForm.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
    </el-dialog>

    </div> 
</template>

<script>
import { getAllAdminApi, addAdminApi, deleteAdminApi, editAdminApi, assignRoleApi } from '@/api/admin/admin.js'
import { getAllRoleApi } from '@/api/roles/roles'
export default {
    inject:['reload'],//刷新时，注入reload
    data(){
        return{
            queryInfo:{
                username:"",  //查询信息
                pageNum:1, //当前页数
                pageSize:10,  //每页最大数
            },
            userList:[],  //用户列表
            roleList:[],  //角色列表
            index:0,
            total:0, //总记录数
            addDialogVisible: false,
            editDialogVisible: false, //对话框状态
            //表单信息
            addForm:{
                nickName:"",
                phone:"",
                email:"",
                username:"", 
                password:"",
                dep:"",
                pos:"",
                roleId: "",
                remark: "",
                note:1,
            },
            editForm:{},
            
            //表单验证
            addFormRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                note: [
                    { required: false, message: '备注', trigger: 'blur' }
                ],
            },
            editFormRules: {
                username: [
                    { required: true, trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                nickName: [
                    { required: true, trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '备注', trigger: 'blur' }
                ],
            }
        }
    },

    methods: {
        indexMethod(index){
            return (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize + index + 1
        },
        //获取所有用户
        addAdmin(){
            this.getAllRoles();
            this.$message.warning("此链接仅为添加员工用户，如需添加用户请点击左侧“用户管理”添加用户");
            this.addDialogVisible = true;
        },

        getUserList(){
            this.userList = []
            getAllAdminApi(this.queryInfo).then(res=>{
                this.total = res.data.total;
                this.userList = res.data.users;
            })
        },
        //最大数
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        //pageNum的触发动作
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getUserList();
        },
        //监听添加用户
        addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },
        addUser(){
            this.$refs.addFormRef.validate(async valid=>{
                if(!valid) return;
                addAdminApi(this.addForm).then(res=>{
                    this.$message.success(res.message)
                    this.addDialogVisible = false
                    this.getUserList()
                })
            })
        },
        closeAddUser(){
            this.addDialogVisible = false;
            // this.$resf.addFormRef.resetFields();
            this.reload()
        },
        editDialogClosed(){
            this.$refs.editFormRef.resetFields();
        },
        deleteUser(id){
            this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                deleteAdminApi(id).then(res=>{
                    this.$message.success(res.message)
                    this.getUserList()
                })
            }).catch(() =>{
                this.$message.info("已取消删除")
            })
        },
        //显示对话框
        showEditDialog(row){
            
            this.editForm = row
            console.log(this.editForm);
            this.editDialogVisible = true
        },
        getRoleIdByroleName(roleName){
            var ans
            this.roleList.forEach(e=>{
                if(e.roleName === roleName){
                    ans = e.id
                }
            })

            return ans
        },
        editUserInfo(){
            this.$refs.editFormRef.validate(valid =>{
                if(!valid) return;
                const roleId = this.getRoleIdByroleName(this.editForm.type)
                console.log(this.editForm.type);
                console.log(this.roleList);
                console.log(roleId);
                editAdminApi(this.editForm,roleId).then(res=>{
                    this.$message.success(res.message)
                    this.editDialogVisible = false
                    this.getUserList()
                })
            })
        },
        getAllRoles(){
            getAllRoleApi().then(res=>{
                this.roleList = res.data.roleList
                console.log(this.roleList);
            })
        }
        
    },
    created(){
        this.getUserList();
        
    }
}
</script>


<style lang="less" scoped>

.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
}
.adduserdialog{
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

</style>